<template>
  <div class="container">
    <van-empty v-if="isEmpty" description="暂无内容" />
    <template v-else>
      <div class="session-view">
        <div class="top-view">
          <h4>销售表现评估等级</h4>
          <div :class="`rate ${levelClass}`">{{ overallEvaluation }}</div>
        </div>

        <div class="session-view-content">
          <div class="info-view" v-for="item of listData" :key="item">
            <h5>{{ item.title }}</h5>
            <Markdown :content="item.content" />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from "pinia";
import { useMinutesStore } from "@/store";
import Markdown from "@/components/markdown.vue";

export default {
  name: "CounsellingSalesPerformance",
  components: { Markdown },
  methods: {
    levelMap(level) {
      if (level === "需改进") {
        level = "不合格";
      } else if (level === "达到预期") {
        level = "良好";
      } else if (level === "优秀") {
        level = "优秀";
      } else {
        level = "良好";
      }
      return level;
    }
  },
  computed: {
    ...mapState(useMinutesStore, {
      salesPerformance: "salesPerformance",
      overallEvaluation: "overallEvaluation"
    }),

    isEmpty() {
      return this.listData.length === 0;
    },

    levelClass() {
      let levelClassMap = {
        优秀: "rate-good",
        良好: "rate-normal",
        不合格: "rate-bad"
      };
      return levelClassMap[this.overallEvaluation] || "rate-normal";
    },

    listData() {
      if (!this.salesPerformance) return [];
      let array = [];
      for (let index = 0; index < this.salesPerformance.length; index++) {
        const item = this.salesPerformance[index];
        const { name } = item;
        let evaluation = item.evaluation;
        const markdown = evaluation.内容;
        let level = this.levelMap(evaluation.评估等级);
        if (name === "整体评估") continue;
        array.push({
          title: `${item.name}-评估等级: ${level}`,
          content: markdown
        });
      }
      return array;
    }
  }
};
</script>

<style lang="less" scoped>
@import "./counselling.less";

.session-view {
  border-radius: 8px;
  background-color: #f9fafc;
  padding: 0;
}

.top-view {
  background-color: #f1f3fb;
  border-radius: 8px 8px 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px 12px;
}

.info-view {
  li {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 24px;
    margin-bottom: 16px;
  }
}

.session-view-content {
  padding: 15px;
}

h5 {
  font-size: 14px;
}

:deep h3 {
  font-size: 14px;
}
</style>
